Ext.define("ECAT.view.Image", {
    extend: 'Ext.Img',
    xtype:'ecatimage',
    config: {
    	mode:true,
		width: 768,
		height: 1024//,
		//draggable :new Ext.util.Draggable({})
    },
	beforeInitialize: function() {
		this.callParent(arguments);
       /* this.element.on({
            pinch: 'onPinch',
            scope: this
        });*/
    },
  	onPinch : function(e) {
		var me = this, 
		target = e.getTarget(), 
		item = Ext.getCmp(target.id);
		alert('e.scale =  '+e.scale);
		//保持居中
		me.setTop((Ext.Viewport.getWindowHeight() - e.scale * item.getHeight() ) / 2 );
    	me.setLeft((Ext.Viewport.getWindowWidth() - e.scale * item.getWidth() ) / 2);
		me.setWidth(e.scale * item.getWidth());
    	me.setHeight(e.scale * item.getHeight());
	},
	onTap : function(e) {
		var btn_menu_bar = Ext.getCmp('btn_menu_bar'),
			btn_menu = Ext.getCmp('btn_menu');
		if (btn_menu && !btn_menu.isHidden()) {
			// 触发btn_menu的点击方法,把菜单显示
			btn_menu.getHandler().call(btn_menu.scope);
		} else if (btn_menu_bar && !btn_menu_bar.isHidden()) {
			// 触发btn_menu_bar的点击方法,把菜单隐掉
			btn_menu_bar.getHandler().call(btn_menu_bar.scope);
		}
	}
});
Ext.define("ECAT.view.ImageDetailButtomPanel", {
    extend: 'Ext.Container',
    xtype : 'imagedetailbuttompanel',
    config : { 
    	id : 'imagedetail_buttompanel',
    	cls : 'touming imagedetailbottom',
    	hidden : true,
    	width: "100%",
    	height: 150,
    	bottom :90,
    	items  : [{
    		xtype : 'component',
    		border : 20,
    		height: 150,
    	    tpl : '{price}<br>{info}'
    	}]
    }
});
Ext.define("ECAT.view.ImageDetailView", {
    extend: 'Ext.Carousel',
    xtype:'imagedetailview',
    requires: ['Ext.Img'],
    config: {
    	id:'imagedetailview',
    	indicator:false,
    	currentIndex : '',
    	buttom_panel : null,
    	items : [{
    		xtype:'ecatimage'
    	},{
    		xtype:'ecatimage'
    	},{
    		xtype:'ecatimage'
    	}],
    	fullscreen : true
    },
    initialize: function(){
    	this.callParent(arguments);
	    var me = this;
	    me.callParent();
	    
	    var isEven = function(nb){
	        return (nb%2 == 0) ? true : false;
	    };
	    
	    me.nbItems = me.getItems().length;
	    me.interval = (isEven(me.nbItems) ? me.nbItems/2 : (me.nbItems-1)/2);
	    me.setActiveItem(me.interval);
	    
	    if(!me.buttom_panel){
	    	me.buttom_panel = Ext.Viewport.add(Ext.create('ECAT.view.ImageDetailButtomPanel'));
	    }
	    
	    me.on('activeitemchange', me.onActiveItemChange, me);
	    me.on('deactivate', me.onDeActivate);
  	},
  	onActiveItemChange: function(c,v,ov){
		var me = this;
	    
	    var active = c.getActiveIndex(),
	        direction = (c.getItems().indexOf(v) > c.getItems().indexOf(ov)) ? 'forward' : 'backward',
	        container = (direction=='forward') ? c.getAt(active-me.interval-1) : c.getAt(active+me.interval+1),
			store = this.store, 
			index = this.getComponent(active).index;
			
		// 设置标题栏、收藏图标、详情内容
    	this.setToolbarTitle(index, store);
	
	    c.remove(container, false);

		if (direction == 'forward') {
			this.setImageSrcForForward(container, store, index);
			c.add(container);
		} else {
			this.setImageSrcForBackward(container, store, index);
			c.insert(0, container);
		}
		
		// 触发btn_menu_bar的点击方法,把菜单隐掉
		Ext.getCmp('btn_menu_bar').getHandler().call(Ext.getCmp('btn_menu_bar').scope);
  },
  // 设置标题栏、收藏图标、详情内容
  setToolbarTitle : function(index, store){
  		var topbar = Ext.getCmp('top_bar');
    	topbar.setTitle('#' + (index + 1) + '/' + store.getCount());
   		this.showCollect();
   		this.buttom_panel.getInnerItems()[0].updateData(this.getActiveModel().data);
  },
  setCurrentImageSrc : function(store, currentIndex){
	    var	record = store.getAt(currentIndex),
	    	container = this.getAt(this.interval);
	    this.store = store;	
	   	container.setSrc(ECAT.lib.getDaImgSrc(record.get('name')));
    	container.index = currentIndex;
    	container.model = record;
    	// 设置标题栏、收藏图标、详情内容
    	this.setToolbarTitle(container.index, this.store);
    	this.setImageSrcForForward(this.getAt(this.interval+1), store, currentIndex);
    	this.setImageSrcForBackward(this.getAt(this.interval-1), store, currentIndex);
  },
  setImageSrcForForward : function(container, store, index) {
		var next = index + 1;
		if (next >= store.getCount()) {
			next = next - store.getCount();
		}
		var nextModel = store.getAt(next);
		container.setSrc(ECAT.lib.getDaImgSrc(nextModel.get('name')));
		container.index = next;
	},
	setImageSrcForBackward : function(container, store, index) {
		var last = index - 1;
		if (last < 0) {
			last = store.getCount() + last;
		}
		var lastModel = store.getAt(last);
		container.setSrc(ECAT.lib.getDaImgSrc(lastModel.get('name')));
		container.index = last;
	},
	getActiveModel : function() {
		var active = this.getActiveIndex(), 
			store = this.store, 
			index = this.getComponent(active).index,
			model = store.getAt(index);
		if (Ext.isEmpty(model)) {
			model = this.getComponent(active).model;
		}
		return model;
	},
	showCollect : function(){
        var	imageDetailView = Ext.getCmp('imagedetailview'),
        	store = Ext.getStore('store_fav'),
        	activeModel = imageDetailView.getActiveModel(),
        	index = store.find('name', activeModel.get('name')),
        	btn_collect = Ext.getCmp('btn_collect');
    	// 已经被收藏
		if(index != -1){
			btn_collect.addCls('collectactive');
		} else{
			// 还未被收藏
			btn_collect.removeCls('collectactive');
		}
	},
	onDeActivate : function(){
		// 触发btn_menu_bar的点击方法,把菜单隐掉
		//Ext.getCmp('btn_menu_bar').getHandler().call(Ext.getCmp('btn_menu_bar').scope);
		this.buttom_panel.hide();
	}
});